<template>
    <div class="swiper-container">
        <a-carousel height="200px" trigger="click" autoplay>
            <a-carousel-item v-for="item in 4" :key="item">
                <h3 class="small justify-center" text="2xl">{{ item }}</h3>
            </a-carousel-item>
        </a-carousel>

        <ContextMenu class="animation-test" :menu="menuList" @select="selectMenu">
            <span>右键菜单区域</span>
            <div class="circle" ref="circleRef"></div>
        </ContextMenu>

        <div class="cube-container" ml100 mt100>
            <div class="cube">
                <div class="side">1</div>
                <div class="side">2</div>
                <div class="side">3</div>
                <div class="side">4</div>
                <div class="side">5</div>
                <div class="side">6</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import aCarousel from "@/components/carousel/index.vue";
import aCarouselItem from "@/components/carousel/item/index.vue";
import ContextMenu from "@/components/contextMenu/index.vue";
import { ContextMenuType } from "@/type/contextMenu";

const menuList = [
    {label:"添加"},
    {label:"修改"},
    {label:"删除全部"},
]

const selectMenu = (item:ContextMenuType) => {
  console.log(item)
}
</script>

<style lang="scss">
.swiper-container {
  display: flex;
  //flex-wrap: wrap;

  .a-carousel {
    width: 600px;
    height: 200px;
  }
  .a-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
  }

  .a-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .a-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .animation-test {
    width: 600px;
    height: 400px;
    border: 1px solid black;
    margin-left: 20px;
    padding: 20px;

    .circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rebeccapurple;
      margin: 100px auto;
      transform: translate(var(--x), var(--y));
      animation: movex 2s, movey 1s;
      animation-timing-function: cubic-bezier(0.5, -800, 0.5, 800);
      animation-iteration-count: infinite;
    }

    //同时改变translate会有冲突,使用变量来控制，但是动画中使用不了变量，
    //所以使用houdini API声明自定义属性，通过改变属性来实现，houdini声明属性只能在css环境中，scss不行
    @keyframes movex {
      to {
        --x: 1px;
      }
    }

    @keyframes movey {
      to {
        --y: 0.1px;
      }
    }
  }

  .cube-container {
    perspective: 1000px;

    .cube {
      transform-style: preserve-3d;
      width: 200px;
      height: 200px;
      position: relative;
      animation: rotate 40s linear infinite;

      .side {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        font-size: 120px;
        line-height: 200px;
      }

      @for $i from 1 through 4 {
        .side:nth-child(#{$i}) {
          transform: rotateY(($i * 90deg)) translateZ(100px);
          background: hsla($i * 30, 50%, $i * 20%, $i * 0.2);
        }
      }

      .side:nth-child(5) {
        transform: rotateX(90deg) translateZ(100px);
        background-color: #99a9bf;
      }

      .side:nth-child(6) {
        transform: rotateX(270deg) translateZ(100px);
        background-color: aqua;
      }

      @keyframes rotate {
        0% {
          transform: rotateY(0) rotateZ(30deg);
        }
        50% {
          transform: rotateY(-360deg) rotateZ(-30deg);
        }
        100% {
          transform: rotateY(-720deg) rotateZ(30deg);
        }
      }
    }
  }
}
</style>
